<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Learning JavaScript - Ch11 Chained Constructor & Apply Lab</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				color: #B088FF;
				font-size: 12pt;
			}
		</style>
		
		<!-- embed jquery by google，藉由google嵌入jquery 1.6.2 -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" language="javascript">
			google.load( "jquery", "1.6.2" );
		</script>
		<script type="text/javascript">
			
			var Animal = function( type, weight, height ) {
				var argsArr = [type, weight, height];
				if( !isArgsVaild( argsArr ) ) {
					return;
				}
				
				if( !isArgumentsVaild( type, weight, height ) ) {
					return;
				}
				
				// 注意，這是私有屬性，無法被繼承
				var _type = type;
				var _weight = weight;
				var _height = height;
				
				// 公開的特性，可以被繼承
				this.age = 10;
				
				this.getType = function() {
					return this._type;
				};
				this.setType = function( type ) {
					this._type = type;
				};
				this.move = function() {
					alert( "moving... " );
				};
				this.getAge = function() {
					return this.age;
				};
			};
			
			/*
			Animal.prototype.getType = function() {
				return this._type;
			}; */
			
			Animal.prototype.getWeight = function() {
				return this._weight;
			};
			
			Animal.prototype.getHeight = function() {
				return this._height;
			};
			
			/*
			Animal.prototype.setType = function( type ) {
				if( !isArgumentsVaild( type ) ) {
					return;
				}
				this._type = type;
			}; */
			
			var Dog = function( name ) {
				if( !isArgumentsVaild( name ) ) {
					return;
				}
				var _name = name;
				
				Animal.call( this, "Dog" );
				//Animal.setType.call( this, "Dog" );
				//this.setType( "Dog" );
				
				this.setAge = function( age ) {
					alert( "execute setAge function now !!!" );
					this.age = age;  // 注意，this.age是繼承自Animal
				};
			};
			

			
			function isArgsVaild( argsArr ) {
				for( var i = 0; i < argsArr.length; i++ ) {
					if( argsArr[i] == null || typeof( argsArr[i] ) === "undefined" ) {
						return false;
					} else {
						return true;
					}
				}
			}
			
			function isArgumentsVaild(  ) {
				for( var i = 0; i < arguments.length; i++ ) {
					// alert( "checking... " + ( i + 1 ) );
					if( arguments[i] == null || typeof( arguments[i] ) === "undefined" ) {
						return false;
					} else {
						return true;
					}
				}
			};
			
			$( document ).ready( function() {
				var dog = new Dog( "Lucky" );
				var dogType = dog.getType();
				dog.move();
				alert( "The type is " + dogType );
				
				var age = dog.getAge();
				$( "#content" ).append( "Dog age is <b>" + age + "</b><br />" );
				
				dog.setAge( 20 );
				var age_afterChange = dog.getAge();
				$( "#content" ).append( "After dog.setAge( 20 ), Dog age is <b>" + age_afterChange + "</b><br />" );
				
			});
		</script>
		
	</head>
	
	<body>
		<div title="temp1" id="header">Hello HTML</div>
		<div title="temp1" id="content"></div>
	</body>
</html>